<!-- 按日期查找 -->
<template>
  <div id="DateFind">
    <!-- 头部 -->
    <Head BackType1="1" title="按日期查找"></Head>
    <!-- 主体部分 -->
    <div id="Main">
      <Calendar
        v-on:choseDay="clickDay"
        v-on:isToday="clickToday"
        :agoDayHide="TodayBefor"
        :futureDayHide="today"
        :sundayStart="true"
      ></Calendar>
    </div>
  </div>
</template>

<script>
import Head from "../components/Head.vue";
import Calendar from "vue-calendar-component";
export default {
  data() {
    return {
      TodayBefor: "",
      today: ""
    };
  },
  components: {
    Calendar,
    Head
  },
  created() {
    this.today = new Date().getTime();
    var Ytime = 86400000 * 30;
    this.TodayBefor = this.today - Ytime;
    var Time2 = new Date(this.TodayBefor);
    this.today = String(this.today).slice(0, 10);
    this.TodayBefor = String(this.TodayBefor).slice(0, 10);
  },
  methods: {
    clickDay(data) {
      // console.log(data); //选中某天
    },
    changeDate(data) {
      // console.log(data); //左右点击切换月份
    },
    clickToday(data) {
      // console.log(data); //跳到了本月
    }
  }
};
</script>

<style lang="less" scoped>
#DateFind {
  #Main {
    position: fixed;
    top: 88px;
    overflow: scroll;
    width: 100%;
  }
}
</style>
<style lang="less">
.wh_container {
  .wh_content_all {
    background-color: #ffffff;
    .wh_top_changge {
      li {
        color: #323232;
        .wh_jiantou1 {
          border-top: 2px solid #323232;
          border-left: 2px solid #323232;
        }
        .wh_jiantou2 {
          border-top: 2px solid #323232;
          border-right: 2px solid #323232;
        }
      }
    }
    .wh_content {
      .wh_content_item {
        color: #323232;
        font-size: 22px;
        .wh_isToday {
          background: #ffffff;
        }
        .wh_chose_day {
          background: #627df1;
        }
      }
    }
  }
}
</style>
